<template>
  <div>
    <el-empty v-if="TestListData.length==0" :image-size="200"></el-empty>
    <el-row v-if="TestListData.length>0">
      <el-col style="width: 240px"  v-for="(test, index) in TestListData" :offset="1">
        <el-skeleton style="width: 240px" :loading="false" animated>
          <template slot="template">
            <el-skeleton-item
                variant="image"
                style="width: 240px; height:240px;"
            />
            <div style="padding: 14px;">
              <el-skeleton-item variant="h3" style="width: 50%;"/>
              <div style="display: flex; align-items: center; justify-items: center; margin-top: 16px; height: 16px;">
                <el-skeleton-item variant="text" style="margin-right: 16px;"/>
                <el-skeleton-item variant="text" style="width: 30%;"/>
              </div>
            </div>
          </template>
          <template>
            <a href="" @click.prevent="toDetail(test.testCode)" style="text-decoration: none;">
              <el-card :body-style="{ padding: '0px', marginBottom: '1px' }" shadow="hover">

                <img :src="test.testPictureUrl"
                     class="image"  style="width: 240px; height:200px;"/>
                <div style="padding: 14px;">
                  <el-popover
                      placement="top-start"
                      title="名字详情"
                      width="200"
                      trigger="hover"
                      :content="test.testName">
                    <el-button type="text" slot="reference" v-text="test.testName"
                               style="white-space:nowrap;text-overflow:ellipsis; overflow:hidden;width: 180px;min-height: 0px;display:inline-block;color: #000000;text-align: left">
                      hover 激活
                    </el-button>
                  </el-popover>
                  <div class="bottom card-header">
                    <el-button type="text" v-text="test.testType" style="">hover 激活</el-button>
                    <el-button type="text" icon="el-icon-view" style=" position:relative;left: 90px">{{test.visitors}}
                    </el-button>
                  </div>
                </div>
              </el-card>
            </a>
          </template>
        </el-skeleton>
        <br>
      </el-col>
    </el-row>

    <!--    <el-row :gutter="20" justify="center">-->
    <!--      <el-col :span="8" v-for="(test, index) in TestListData" :key="test.testCode" offset="4">-->
    <!--        <a href="" @click.prevent="toDetail(test.testCode)" style="text-decoration: none;">-->
    <!--          <el-card :body-style="{ padding: '1px' }" shadow="hover" style="width: 60%">-->
    <!--            <img :src="test.testPictureUrl"-->
    <!--                 class="image">-->
    <!--            <div style="padding: 14px;">-->
    <!--              <span v-text="test.testName">name</span>-->
    <!--              <div class="bottom clearfix">-->
    <!--                <span v-text="test.testType">testType</span>-->
    <!--                <i class="el-icon-view" style="margin-left: 75%"></i>-->
    <!--                <span v-text="test.visitors">testType</span>-->

    <!--              </div>-->
    <!--            </div>-->
    <!--          </el-card>-->
    <!--        </a>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!--    分页-->
    <br>
    <div style="margin-left: 50%">
<!--      <el-pagination-->
<!--          background-->
<!--          @current-change="handleCurrentChange"-->
<!--          @prev-click="handleCurrentChange"-->
<!--          @next-click="handleCurrentChange"-->
<!--          layout="prev, pager, next"-->
<!--          :total="totals">-->
<!--      </el-pagination>-->
      <!--分页-->
      <el-pagination
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
          :page-size="condition.pageSize"
          layout="prev, pager, next"
          :total="totals">
      </el-pagination>
    </div>
  </div>
</template>

<script>


export default {
  props:{
    getParentType:String,
    getKeyword:String,
    required:true
  },
watch:{
    getParentType(val){
      this.condition.keyword='';
      this.condition.parentType=val
      this.searchTest()
    },
    getKeyword(val){
      this.condition.keyword=val
      this.searchTest()
    }

},
  name: "ShowTestListPlus",
  data() {
    return {
      // 靶场列表数据
      TestListData: [{
        testCode: '1',
        testName: 'name',
        testType: '2',
        testPictureUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        visitors: '34',
      }],
      // 查询条件
      condition: {
        difficulty: '',
        parentType: '',
        currentPage: 1,
        pageSize: 8,
        searchByType: '',
        order: "heatRange",
        keyword: "",
      },
      totals: 10,
      isFirst:true,

    }
  },
  activated() {

  },

  methods: {
    searchTest() {
      this.$axios.post("/testOutside/search", this.condition).then(response => {
        if (response.data.code == 200) {
          this.TestListData = response.data.data.content;
          this.condition.currentPage = response.data.data.number + 1;
          this.condition.pageSize = response.data.data.size;
          this.totals = response.data.data.totalElements;
        }
      })
    },

    handleCurrentChange(page) {
      this.condition.currentPage = page;
      this.searchTest();
    },
    toDetail(id) {
      sessionStorage.setItem("testId", id)
      this.$router.push("/testDetail")
    }

  },
  created() {
    let parentType=sessionStorage.getItem('parentType')
   if (parentType!=null&&parentType!=undefined) this.condition.parentType=parentType;

    this.searchTest();
  }
}
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.el-card {

}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>